import { Vector2D } from './Vector2D.js'
// const rc = rough.canvas(document.querySelector('canvas'))
// const ctx = rc.ctx
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.translate(0, 512)
ctx.scale(1, -1)
ctx.lineCap = 'round'

// const hillOpts = {
//   roughness: 0,
//   strokeWidth: 2,
//   fill: 'blue'
// }

// rc.path('M-180 0L-80 100L20 0', hillOpts)
// rc.path('M180 0L80 100L-20 0', hillOpts)

// rc.circle(0, 150, 105, {
//   stroke: 'red',
//   strokeWidth: 4,
//   fill: 'rgba(255,255,0,0.4)',
//   fillStyle: 'solid'
// })
/**
 * 
 * @param {CanvasRenderingContext2D} ctx 
 * @param {Vector2D} v0 
 * @param {Number} length 
 * @param {Number} thickness 
 * @param {Number} dir 
 * @param {Number} bias 
 */
function drawBranch(ctx, v0, length, thickness, dir, bias) {
  const v = new Vector2D(1, 0).rotate(dir).scale(length)
  const v1 = v0.copy().add(v)
  ctx.lineWidth = thickness
  ctx.moveTo(...v0)
  ctx.lineTo(...v1)
  ctx.stroke()

  if(thickness > 2) {
    const left = Math.PI / 4 + 0.5 * (dir + 0.2) + bias * (Math.random() - 0.5);
    drawBranch(ctx, v1, length * 0.9, thickness * 0.8, left, bias * 0.9);
    const right = Math.PI / 4 + 0.5 * (dir - 0.2) + bias * (Math.random() - 0.5);
    drawBranch(ctx, v1, length * 0.9, thickness * 0.8, right, bias * 0.9);
  }

  if(thickness < 5 && Math.random() < 0.3) {
    ctx.save();
    ctx.strokeStyle = '#c72c35';
    const th = Math.random() * 6 + 3;
    ctx.lineWidth = th;
    ctx.beginPath();
    ctx.moveTo(...v1);
    ctx.lineTo(v1.x, v1.y - 2);
    ctx.stroke();
    ctx.restore();
  }
}
const v0 = new Vector2D(256, 0);
drawBranch(ctx, v0, 50, 10, 1, 3)